<template>
  <div class="appbox">
    <img
      src="https://p0.meituan.net/scarlett/c83c2093084fd5b99e6b58523d13ca3e523392.png"
      alt=""
      class="top-img"
    >
    <div class="top-box1">
      <div class="top-head">
        <img
          src="https://p0.meituan.net/myvideodistribute/84415cffa7df10eb107cbeca3fb65a4a1036132.jpg@120w_180h_1c_1e"
          alt=""
          class="top-xiangs"
        >
        <div class="xiangs-left">
          <div class="top-right">
            <div class="xiangs-wz1">
              选座购票 套票优惠【嘻哈包袱铺】相声专场演出 -五棵松剧场
            </div>
            <div class="xiangs-wz2">戏曲艺术</div>
          </div>
          <div class="bottom-007">
            <div class="price">
              <span class="price-1">100-220</span>
              <span class="price-2">元</span>
            </div>
          </div>
        </div>
      </div>
      <div class="xiangs-tj">
        北京喜欢包袱铺
      </div>
      <div class="xiangs-xk">
        <div class="xk-left">
          <div class="user-tx">
            <img
              src="https://p0.meituan.net/scarlett/97e278172600dda926e15e3afe0fd1b972428.jpg@120w_120h_1c_1e"
              alt=""
            >
            <img
              src="https://p0.meituan.net/scarlett/ff10e740168cecd7a740d3d11b8f996e56420.jpg@120w_120h_1c_1e"
              alt=""
            >
            <img
              src="https://p0.meituan.net/scarlett/5bd7c9a1ea2e3771c712b6d679e883a056888.jpg@120w_120h_1c_1e"
              alt=""
            >
          </div>
          <div class="user-nub">15656人想看</div>
        </div>
        <div class="xk-right">去看看</div>
      </div>
      <img
        src="https://static.meituan.net/bs/myfe/wxapp/file/images/show/top/TOP1.png"
        alt=""
        class="top1-img"
      >
    </div>

    <div class="top-box1">
      <div class="top-head">
        <img
          src="https://p0.meituan.net/myvideodistribute/da9009fb508412414e2083d81310d7861741733.jpg@120w_180h_1c_1e"
          alt=""
          class="top-xiangs"
        >
        <div class="xiangs-left">
          <div class="top-right">
            <div class="xiangs-wz1">
              【真迹展】遇见浮世·博览江户 ——江户时代浮世绘原版珍藏展
            </div>
            <div class="xiangs-wz2">戏曲艺术</div>
          </div>
          <div class="bottom-007">
            <div class="price">
              <span class="price-1">58-128</span>
              <span class="price-2">元</span>
            </div>
          </div>
        </div>
      </div>
      <div class="fushi-tj">
        <div class="fushi-tu">
          <div class="tuji-one">
            <img
              src="https://img.meituan.net/kylisean/0698c7cc32a7918d088deef3410af9c82306298.png@436w_340h_1c_1e"
              alt=""
            >
          </div>
          <div class="tuji-two">
            <div class="tu-one">
              <img
                src="https://img.meituan.net/kylisean/6bd8a5e3848da4bbafeb686b75bcc21c2474919.png@216w_168h_1c_1e"
                alt=""
              >
            </div>
            <div class="tu-two">
              <img
                src="https://img.meituan.net/kylisean/0ff2497c29cbcc71b5382962315ba62f1882513.png@216w_168h_1c_1e"
                alt=""
              >
            </div>
          </div>
        </div>
      </div>
      <div class="xiangs-tj">
        2021,最出片的打卡胜地!
      </div>
      <div class="xiangs-xk">
        <div class="xk-left">
          <div class="user-tx">
            <img
              src="https://p0.meituan.net/scarlett/97e278172600dda926e15e3afe0fd1b972428.jpg@120w_120h_1c_1e"
              alt=""
            >
            <img
              src="https://p0.meituan.net/scarlett/ff10e740168cecd7a740d3d11b8f996e56420.jpg@120w_120h_1c_1e"
              alt=""
            >
            <img
              src="https://p0.meituan.net/scarlett/5bd7c9a1ea2e3771c712b6d679e883a056888.jpg@120w_120h_1c_1e"
              alt=""
            >
          </div>
          <div class="user-nub">15656人想看</div>
        </div>
        <div class="xk-right">去看看</div>
      </div>
      <img
        src="https://static.meituan.net/bs/myfe/wxapp/file/images/show/top/TOP2.png"
        alt=""
        class="top1-img"
      >
    </div>

    <div class="top-box1">
      <div class="top-head">
        <img
          src="https://p0.meituan.net/moviesh/878e197b944222957f28db4d08a5c6de147972.jpg@120w_180h_1c_1e"
          alt=""
          class="top-xiangs"
        >
        <div class="xiangs-left">
          <div class="top-right">
            <div class="xiangs-wz1">
              开心麻花2019年底大戏《瞎画艺术家》
            </div>
            <div class="xiangs-wz2">戏曲艺术</div>
          </div>
          <div class="bottom-007">
            <div class="price">
              <span class="price-1">80-1080</span>
              <span class="price-2">元</span>
            </div>
          </div>
        </div>
      </div>
      <div class="fushi-tj">
        <div class="fushi-tu">
          <div class="tuji-one">
            <img
              src="https://img.meituan.net/kylisean/797a1e02eae328dd06958a9205f6e5354899955.jpg@436w_340h_1c_1e"
              alt=""
            >
          </div>
          <div class="tuji-two">
            <div class="tu-one">
              <img
                src="https://img.meituan.net/kylisean/a639f643dce5db503fcf037b1855fd319401355.jpg@216w_168h_1c_1e"
                alt=""
              >
            </div>
            <div class="tu-two">
              <img
                src="https://img.meituan.net/kylisean/1238b884e437d436c61d1ece55696ce05664083.jpg@216w_168h_1c_1e"
                alt=""
              >
            </div>
          </div>
        </div>
      </div>
      <div class="xiangs-tj">
        五星口碑神作,谐音梗满天飞
      </div>
      <div class="xiangs-xk">
        <div class="xk-left">
          <div class="user-tx">
            <img
              src="https://p0.meituan.net/scarlett/97e278172600dda926e15e3afe0fd1b972428.jpg@120w_120h_1c_1e"
              alt=""
            >
            <img
              src="https://p0.meituan.net/scarlett/ff10e740168cecd7a740d3d11b8f996e56420.jpg@120w_120h_1c_1e"
              alt=""
            >
            <img
              src="https://p0.meituan.net/scarlett/5bd7c9a1ea2e3771c712b6d679e883a056888.jpg@120w_120h_1c_1e"
              alt=""
            >
          </div>
          <div class="user-nub">15656人想看</div>
        </div>
        <div class="xk-right">去看看</div>
      </div>
      <img
        src="https://static.meituan.net/bs/myfe/wxapp/file/images/show/top/TOP3.png"
        alt=""
        class="top1-img"
      >
    </div>

    <div class="top-box1">
      <div class="top-head">
        <img
          src="https://p0.meituan.net/myvideodistribute/bfe7cc28d654a73cb5c782b2558d2f72361815.jpg@120w_180h_1c_1e"
          alt=""
          class="top-xiangs"
        >
        <div class="xiangs-left">
          <div class="top-right">
            <div class="xiangs-wz1">
              <div
                data-v-229770f2=""
                class="title"
              >【点评五星推荐】WAVELENGTH：此时此刻</div>
            </div>
            <div class="xiangs-wz2">戏曲艺术</div>
          </div>
          <div class="bottom-007">
            <div class="price">
              <span class="price-1">68-118</span>
              <span class="price-2">元</span>
            </div>
          </div>
        </div>
      </div>
      <div class="fushi-tj">
        <div class="fushi-tu">
          <div class="tuji-one">
            <img
              src="https://img.meituan.net/kylisean/dc8534631a17fa5e4aacc06c6645b352238457.jpg@436w_340h_1c_1e"
              alt=""
            >
          </div>
          <div class="tuji-two">
            <div class="tu-one">
              <img
                src="https://img.meituan.net/kylisean/5699a8accff446fdfb565513dfb288e3115263.jpg@216w_168h_1c_1e"
                alt=""
              >
            </div>
            <div class="tu-two">
              <img
                src="https://img.meituan.net/kylisean/01e035f40a28f185c6a19ba19c4b7348589477.jpg@216w_168h_1c_1e"
                alt=""
              >
            </div>
          </div>
        </div>
      </div>
      <div class="xiangs-tj">
        春季重磅展览《此时此刻》
      </div>
      <div class="xiangs-xk">
        <div class="xk-left">
          <div class="user-tx">
            <img
              src="https://p0.meituan.net/scarlett/97e278172600dda926e15e3afe0fd1b972428.jpg@120w_120h_1c_1e"
              alt=""
            >
            <img
              src="https://p0.meituan.net/scarlett/ff10e740168cecd7a740d3d11b8f996e56420.jpg@120w_120h_1c_1e"
              alt=""
            >
            <img
              src="https://p0.meituan.net/scarlett/5bd7c9a1ea2e3771c712b6d679e883a056888.jpg@120w_120h_1c_1e"
              alt=""
            >
          </div>
          <div class="user-nub">15656人想看</div>
        </div>
        <div class="xk-right">去看看</div>
      </div>
    </div>

    <div class="top-box1">
      <div class="top-head">
        <img
          src="https://p0.meituan.net/myvideodistribute/801dcbfd0f4de6d24a661d54f770c5301330567.png@120w_180h_1c_1e"
          alt=""
          class="top-xiangs"
        >
        <div class="xiangs-left">
          <div class="top-right">
            <div class="xiangs-wz1">
              【限量超值卡券包】北京丽泽天街x泡泡玛特LABUBU全国首展
            </div>
            <div class="xiangs-wz2">戏曲艺术</div>
          </div>
          <div class="bottom-007">
            <div class="price">
              <span class="price-1">29.90</span>
              <span class="price-2">元</span>
            </div>
          </div>
        </div>
      </div>
      <div class="xiangs-xk">
        <div class="xk-left">
          <div class="user-tx">
            <img
              src="https://p0.meituan.net/scarlett/97e278172600dda926e15e3afe0fd1b972428.jpg@120w_120h_1c_1e"
              alt=""
            >
            <img
              src="https://p0.meituan.net/scarlett/ff10e740168cecd7a740d3d11b8f996e56420.jpg@120w_120h_1c_1e"
              alt=""
            >
            <img
              src="https://p0.meituan.net/scarlett/5bd7c9a1ea2e3771c712b6d679e883a056888.jpg@120w_120h_1c_1e"
              alt=""
            >
          </div>
          <div class="user-nub">15656人想看</div>
        </div>
        <div class="xk-right">去看看</div>
      </div>
    </div>

    <div class="top-box1">
      <div class="top-head">
        <img
          src="https://p1.meituan.net/moviesh/4670adbb36de685cbf779f72ab9109b4121603.jpg@120w_180h_1c_1e"
          alt=""
          class="top-xiangs"
        >
        <div class="xiangs-left">
          <div class="top-right">
            <div class="xiangs-wz1">
              开心麻花首部悬疑惊悚喜剧《醉后赢家》
            </div>
            <div class="xiangs-wz2">话剧歌剧</div>
          </div>
          <div class="bottom-007">
            <div class="price">
              <span class="price-1">80-1080</span>
              <span class="price-2">元</span>
            </div>
          </div>
        </div>
      </div>
      <div class="xiangs-xk">
        <div class="xk-left">
          <div class="user-tx">
            <img
              src="https://p0.meituan.net/scarlett/97e278172600dda926e15e3afe0fd1b972428.jpg@120w_120h_1c_1e"
              alt=""
            >
            <img
              src="https://p0.meituan.net/scarlett/ff10e740168cecd7a740d3d11b8f996e56420.jpg@120w_120h_1c_1e"
              alt=""
            >
            <img
              src="https://p0.meituan.net/scarlett/5bd7c9a1ea2e3771c712b6d679e883a056888.jpg@120w_120h_1c_1e"
              alt=""
            >
          </div>
          <div class="user-nub">15656人想看</div>
        </div>
        <div class="xk-right">去看看</div>
      </div>
    </div>

    <div class="top-box1">
      <div class="top-head">
        <img
          src="https://p0.meituan.net/myvideodistribute/2efa3359bb0b2d1247609ddadb360c71566819.jpg@120w_180h_1c_1e"
          alt=""
          class="top-xiangs"
        >
        <div class="xiangs-left">
          <div class="top-right">
            <div class="xiangs-wz1">
              <div
                data-v-229770f2=""
                class="title"
              >坂本龙一：观音·听时</div>
            </div>
            <div class="xiangs-wz2">休闲展览</div>
          </div>
          <div class="bottom-007">
            <div class="price">
              <span class="price-1">130-220</span>
              <span class="price-2">元</span>
            </div>
          </div>
        </div>
      </div>
      <div class="fushi-tj">
        <div class="fushi-tu">
          <div class="tuji-one">
            <img
              src="https://img.meituan.net/kylisean/11c14a55ebd918d24f1f717c9ce3b0e6826143.jpg@436w_340h_1c_1e"
              alt=""
            >
          </div>
          <div class="tuji-two">
            <div class="tu-one">
              <img
                src="https://img.meituan.net/kylisean/52738d00f6dc55c9f3cda28074583ca9521562.jpg@216w_168h_1c_1e"
                alt=""
              >
            </div>
            <div class="tu-two">
              <img
                src="https://img.meituan.net/kylisean/42ac7fa4d56846a431c930360510644a721520.jpg@216w_168h_1c_1e"
                alt=""
              >
            </div>
          </div>
        </div>
      </div>
      <div class="xiangs-xk">
        <div class="xk-left">
          <div class="user-tx">
            <img
              src="https://p0.meituan.net/scarlett/97e278172600dda926e15e3afe0fd1b972428.jpg@120w_120h_1c_1e"
              alt=""
            >
            <img
              src="https://p0.meituan.net/scarlett/ff10e740168cecd7a740d3d11b8f996e56420.jpg@120w_120h_1c_1e"
              alt=""
            >
            <img
              src="https://p0.meituan.net/scarlett/5bd7c9a1ea2e3771c712b6d679e883a056888.jpg@120w_120h_1c_1e"
              alt=""
            >
          </div>
          <div class="user-nub">15656人想看</div>
        </div>
        <div class="xk-right">去看看</div>
      </div>
    </div>

    <div class="top-box1">
      <div class="top-head">
        <img
          src="https://p0.meituan.net/myvideodistribute/a392940d6ac40761e00989dda69c6dd81506323.png@120w_180h_1c_1e"
          alt=""
          class="top-xiangs"
        >
        <div class="xiangs-left">
          <div class="top-right">
            <div class="xiangs-wz1">
              【脱口秀专场】超级爆笑盛典X北喜众星云集：喜剧中心--狂欢之夜
            </div>
            <div class="xiangs-wz2">话剧歌剧</div>
          </div>
          <div class="bottom-007">
            <div class="price">
              <span class="price-1">60-280</span>
              <span class="price-2">元</span>
            </div>
          </div>
        </div>
      </div>
      <div class="xiangs-xk">
        <div class="xk-left">
          <div class="user-tx">
            <img
              src="https://p0.meituan.net/scarlett/97e278172600dda926e15e3afe0fd1b972428.jpg@120w_120h_1c_1e"
              alt=""
            >
            <img
              src="https://p0.meituan.net/scarlett/ff10e740168cecd7a740d3d11b8f996e56420.jpg@120w_120h_1c_1e"
              alt=""
            >
            <img
              src="https://p0.meituan.net/scarlett/5bd7c9a1ea2e3771c712b6d679e883a056888.jpg@120w_120h_1c_1e"
              alt=""
            >
          </div>
          <div class="user-nub">15656人想看</div>
        </div>
        <div class="xk-right">去看看</div>
      </div>
    </div>

    <div class="top-box1">
      <div class="top-head">
        <img
          src="https://p1.meituan.net/myvideodistribute/299a379f3c76b503294065ccbf591eaa2623517.jpg@120w_180h_1c_1e"
          alt=""
          class="top-xiangs"
        >
        <div class="xiangs-left">
          <div class="top-right">
            <div class="xiangs-wz1">
              <div
                data-v-229770f2=""
                class="title"
              >张皓宸「流浪的树」创作个展北京站</div>
            </div>
            <div class="xiangs-wz2">休闲展览</div>
          </div>
          <div class="bottom-007">
            <div class="price">
              <span class="price-1">58</span>
              <span class="price-2">元</span>
            </div>
          </div>
        </div>
      </div>
      <div class="fushi-tj">
        <div class="fushi-tu">
          <div class="tuji-one">
            <img
              src="https://img.meituan.net/kylisean/8d525a435040243a263b80ba7b8c278b2919129.png@436w_340h_1c_1e"
              alt=""
            >
          </div>
          <div class="tuji-two">
            <div class="tu-one">
              <img
                src="https://img.meituan.net/kylisean/42bf98ef9f768bf78535ee53e86289284581445.jpg@216w_168h_1c_1e"
                alt=""
              >
            </div>
            <div class="tu-two">
              <img
                src="https://img.meituan.net/kylisean/3e2500ad1368dfbbd333f89cfad3a8dd3852729.jpg@216w_168h_1c_1e"
                alt=""
              >
            </div>
          </div>
        </div>
      </div>
      <div class="xiangs-xk">
        <div class="xk-left">
          <div class="user-tx">
            <img
              src="https://p0.meituan.net/scarlett/97e278172600dda926e15e3afe0fd1b972428.jpg@120w_120h_1c_1e"
              alt=""
            >
            <img
              src="https://p0.meituan.net/scarlett/ff10e740168cecd7a740d3d11b8f996e56420.jpg@120w_120h_1c_1e"
              alt=""
            >
            <img
              src="https://p0.meituan.net/scarlett/5bd7c9a1ea2e3771c712b6d679e883a056888.jpg@120w_120h_1c_1e"
              alt=""
            >
          </div>
          <div class="user-nub">15656人想看</div>
        </div>
        <div class="xk-right">去看看</div>
      </div>
    </div>

    <div class="top-box1">
      <div class="top-head">
        <img
          src="https://p0.meituan.net/myvideodistribute/0bb06c4bd8955f9279d40f0fafff110775782.jpg@120w_180h_1c_1e"
          alt=""
          class="top-xiangs"
        >
        <div class="xiangs-left">
          <div class="top-right">
            <div class="xiangs-wz1">
              <div
                data-v-229770f2=""
                class="title"
              >【选座购票】2021北京刘老根大舞台</div>
            </div>
            <div class="xiangs-wz2">戏曲艺术</div>
          </div>
          <div class="bottom-007">
            <div class="price">
              <span class="price-1">380-980</span>
              <span class="price-2">元</span>
            </div>
          </div>
        </div>
      </div>
      <div class="fushi-tj">
        <div class="fushi-tu">
          <div class="tuji-one">
            <img
              src="https://img.meituan.net/kylisean/ae293542345ec2481b36024ca52c27a42504311.jpg@436w_340h_1c_1e"
              alt=""
            >
          </div>
          <div class="tuji-two">
            <div class="tu-one">
              <img
                src="https://img.meituan.net/kylisean/46f64d6a61cf3e9353afcc7c15df8ed92774581.jpg@216w_168h_1c_1e"
                alt=""
              >
            </div>
            <div class="tu-two">
              <img
                src="https://img.meituan.net/kylisean/174eff89946c6e65f6670d6e8a8640781895566.jpg@216w_168h_1c_1e"
                alt=""
              >
            </div>
          </div>
        </div>
      </div>
      <div class="xiangs-tj">
        全明星班底
      </div>
      <div class="xiangs-xk">
        <div class="xk-left">
          <div class="user-tx">
            <img
              src="https://p0.meituan.net/scarlett/97e278172600dda926e15e3afe0fd1b972428.jpg@120w_120h_1c_1e"
              alt=""
            >
            <img
              src="https://p0.meituan.net/scarlett/ff10e740168cecd7a740d3d11b8f996e56420.jpg@120w_120h_1c_1e"
              alt=""
            >
            <img
              src="https://p0.meituan.net/scarlett/5bd7c9a1ea2e3771c712b6d679e883a056888.jpg@120w_120h_1c_1e"
              alt=""
            >
          </div>
          <div class="user-nub">15656人想看</div>
        </div>
        <div class="xk-right">去看看</div>
      </div>
    </div>

    <div class="top-box1">
      <div class="top-head">
        <img
          src="https://p1.meituan.net/myvideodistribute/5ed69106ea437ac656740b31af18acc5881987.png@120w_180h_1c_1e"
          alt=""
          class="top-xiangs"
        >
        <div class="xiangs-left">
          <div class="top-right">
            <div class="xiangs-wz1">
              【限时5折·买一送一】繁星戏剧 舞台剧《说走就走的旅行》第15轮
            </div>
            <div class="xiangs-wz2">话剧歌剧</div>
          </div>
          <div class="bottom-007">
            <div class="price">
              <span class="price-1">100-280</span>
              <span class="price-2">元</span>
            </div>
          </div>
        </div>
      </div>
      <div class="xiangs-tj">
        黄彦卓导演创作"青春冲动"两部曲
      </div>
      <div class="xiangs-xk">
        <div class="xk-left">
          <div class="user-tx">
            <img
              src="https://p0.meituan.net/scarlett/97e278172600dda926e15e3afe0fd1b972428.jpg@120w_120h_1c_1e"
              alt=""
            >
            <img
              src="https://p0.meituan.net/scarlett/ff10e740168cecd7a740d3d11b8f996e56420.jpg@120w_120h_1c_1e"
              alt=""
            >
            <img
              src="https://p0.meituan.net/scarlett/5bd7c9a1ea2e3771c712b6d679e883a056888.jpg@120w_120h_1c_1e"
              alt=""
            >
          </div>
          <div class="user-nub">15656人想看</div>
        </div>
        <div class="xk-right">去看看</div>
      </div>
    </div>

    <div class="top-box1">
      <div class="top-head">
        <img
          src="https://p0.meituan.net/myvideodistribute/01b93927cfcbd24da7803cabd60273c8831210.jpg@120w_180h_1c_1e"
          alt=""
          class="top-xiangs"
        >
        <div class="xiangs-left">
          <div class="top-right">
            <div class="xiangs-wz1">
              寻找隐匿的天才：薇薇安·迈尔
            </div>
            <div class="xiangs-wz2">休闲展览</div>
          </div>
          <div class="bottom-007">
            <div class="price">
              <span class="price-1">40-80</span>
              <span class="price-2">元</span>
            </div>
          </div>
        </div>
      </div>
      <div class="xiangs-xk">
        <div class="xk-left">
          <div class="user-tx">
            <img
              src="https://p0.meituan.net/scarlett/97e278172600dda926e15e3afe0fd1b972428.jpg@120w_120h_1c_1e"
              alt=""
            >
            <img
              src="https://p0.meituan.net/scarlett/ff10e740168cecd7a740d3d11b8f996e56420.jpg@120w_120h_1c_1e"
              alt=""
            >
            <img
              src="https://p0.meituan.net/scarlett/5bd7c9a1ea2e3771c712b6d679e883a056888.jpg@120w_120h_1c_1e"
              alt=""
            >
          </div>
          <div class="user-nub">15656人想看</div>
        </div>
        <div class="xk-right">去看看</div>
      </div>
    </div>

    <div class="top-box1">
      <div class="top-head">
        <img
          src="https://p0.meituan.net/myvideodistribute/74f1ccf7cfba4ec22d790ad0f2546ded968654.jpg@120w_180h_1c_1e"
          alt=""
          class="top-xiangs"
        >
        <div class="xiangs-left">
          <div class="top-right">
            <div class="xiangs-wz1">
              <div
                data-v-229770f2=""
                class="title"
              >【抢限量优惠票·五一必玩】第三届IJOY漫展xCGF游戏节</div>
            </div>
            <div class="xiangs-wz2">休闲展览</div>
          </div>
          <div class="bottom-007">
            <div class="price">
              <span class="price-1">80-268</span>
              <span class="price-2">元</span>
            </div>
          </div>
        </div>
      </div>
      <div class="fushi-tj">
        <div class="fushi-tu">
          <div class="tuji-one">
            <img
              src="https://img.meituan.net/kylisean/8be23f975acc2b3b7128e1cb8789cb7b1454470.png@436w_340h_1c_1e"
              alt=""
            >
          </div>
          <div class="tuji-two">
            <div class="tu-one">
              <img
                src="https://img.meituan.net/kylisean/cdd3215f05400a2bfec7a72905297df21136565.png@216w_168h_1c_1e"
                alt=""
              >
            </div>
            <div class="tu-two">
              <img
                src="https://img.meituan.net/kylisean/ac1171444aa441aaecae69905cbdda171706031.png@216w_168h_1c_1e"
                alt=""
              >
            </div>
          </div>
        </div>
      </div>
      <div class="xiangs-tj">
        超千万粉丝重磅嘉宾燃爆帝都!
      </div>
      <div class="xiangs-xk">
        <div class="xk-left">
          <div class="user-tx">
            <img
              src="https://p0.meituan.net/scarlett/97e278172600dda926e15e3afe0fd1b972428.jpg@120w_120h_1c_1e"
              alt=""
            >
            <img
              src="https://p0.meituan.net/scarlett/ff10e740168cecd7a740d3d11b8f996e56420.jpg@120w_120h_1c_1e"
              alt=""
            >
            <img
              src="https://p0.meituan.net/scarlett/5bd7c9a1ea2e3771c712b6d679e883a056888.jpg@120w_120h_1c_1e"
              alt=""
            >
          </div>
          <div class="user-nub">15656人想看</div>
        </div>
        <div class="xk-right">去看看</div>
      </div>
    </div>

    <div class="top-box1">
      <div class="top-head">
        <img
          src="https://p1.meituan.net/myvideodistribute/4a647f41204dce17d5bf2549697fa6e0196761.jpg@120w_180h_1c_1e"
          alt=""
          class="top-xiangs"
        >
        <div class="xiangs-left">
          <div class="top-right">
            <div class="xiangs-wz1">
              <div
                data-v-229770f2=""
                class="title"
              >【限时·买一送一】繁星戏剧 悬疑喜剧《一夜一生》第15轮</div>
            </div>
            <div class="xiangs-wz2">话剧歌剧</div>
          </div>
          <div class="bottom-007">
            <div class="price">
              <span class="price-1">100-280</span>
              <span class="price-2">元</span>
            </div>
          </div>
        </div>
      </div>
      <div class="fushi-tj">
        <div class="fushi-tu">
          <div class="tuji-one">
            <img
              src="https://img.meituan.net/kylisean/7cf6df1a3665fbdaba172e285afcd8dd956756.jpg@436w_340h_1c_1e"
              alt=""
            >
          </div>
          <div class="tuji-two">
            <div class="tu-one">
              <img
                src="https://img.meituan.net/kylisean/cfa8b2d7384e2363591e8192eff4d4b31431958.jpg@216w_168h_1c_1e"
                alt=""
              >
            </div>
            <div class="tu-two">
              <img
                src="https://img.meituan.net/kylisean/e2d58fdf672bbbad54f04992a91e102b1672138.jpg@216w_168h_1c_1e"
                alt=""
              >
            </div>
          </div>
        </div>
      </div>
      <div class="xiangs-tj">
        观众称之为"剧场奇妙夜"
      </div>
      <div class="xiangs-xk">
        <div class="xk-left">
          <div class="user-tx">
            <img
              src="https://p0.meituan.net/scarlett/97e278172600dda926e15e3afe0fd1b972428.jpg@120w_120h_1c_1e"
              alt=""
            >
            <img
              src="https://p0.meituan.net/scarlett/ff10e740168cecd7a740d3d11b8f996e56420.jpg@120w_120h_1c_1e"
              alt=""
            >
            <img
              src="https://p0.meituan.net/scarlett/5bd7c9a1ea2e3771c712b6d679e883a056888.jpg@120w_120h_1c_1e"
              alt=""
            >
          </div>
          <div class="user-nub">15656人想看</div>
        </div>
        <div class="xk-right">去看看</div>
      </div>
    </div>

    <div class="top-box1">
      <div class="top-head">
        <img
          src="https://p0.meituan.net/myvideodistribute/646d2134542d2c403cd1b64ec3718a8f83354.jpg@120w_180h_1c_1e"
          alt=""
          class="top-xiangs"
        >
        <div class="xiangs-left">
          <div class="top-right">
            <div class="xiangs-wz1">
              爆笑脱口秀《周六脱口秀》-整点遇见喜剧
            </div>
            <div class="xiangs-wz2">戏曲艺术</div>
          </div>
          <div class="bottom-007">
            <div class="price">
              <span class="price-1">80-180</span>
              <span class="price-2">元</span>
            </div>
          </div>
        </div>
      </div>
      <div class="xiangs-xk">
        <div class="xk-left">
          <div class="user-tx">
            <img
              src="https://p0.meituan.net/scarlett/97e278172600dda926e15e3afe0fd1b972428.jpg@120w_120h_1c_1e"
              alt=""
            >
            <img
              src="https://p0.meituan.net/scarlett/ff10e740168cecd7a740d3d11b8f996e56420.jpg@120w_120h_1c_1e"
              alt=""
            >
            <img
              src="https://p0.meituan.net/scarlett/5bd7c9a1ea2e3771c712b6d679e883a056888.jpg@120w_120h_1c_1e"
              alt=""
            >
          </div>
          <div class="user-nub">15656人想看</div>
        </div>
        <div class="xk-right">去看看</div>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  data: () => ({})
}
</script>
<style lang="scss" scoped>
.appbox {
  font-family: Hiragino Sans GB, sans-serif, Helvetica, "\5B8B\4F53";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.body {
  font-size: 14px;
}
a,
img {
  display: block;
}
.appbox {
  width: 100%;
  height: 5000px;
  padding-bottom: 0.0625rem;
  min-height: 100%;
  background-color: rgb(78, 64, 125);
  text-align: center;
  color: #2c3e50;
}
.top-img {
  height: 12.5rem;
  width: 100%;
  display: block;
}
.top-box1 {
  margin-top: 1.875rem;
  margin: 1.9375rem 0.75rem;
  padding: 1.25rem 0.625rem 0.9375rem;
  background: #fff;
  border-radius: 0.875rem;
  position: relative;
  display: block;
}
.top-head {
  display: flex;
  text-align: center;
  color: #2c3e50;
  font-family: Hiragino Sans GB, sans-serif, Helvetica, "\5B8B\4F53";
  -webkit-font-smoothing: antialiased;
}
.top-xiangs {
  width: 4.125rem;
  height: 5.625rem;
  flex-shrink: 0;
  border-radius: 0.5rem;
}
.xiangs-wz1 {
  text-align: left;
  color: #2c3e50;
  font-family: Hiragino Sans GB, sans-serif, Helvetica, "\5B8B\4F53";
  -webkit-font-smoothing: antialiased;
}
.xiangs-wz1 {
  text-align: left;
  font-size: 1rem;
  font-weight: 700;
  color: #2d3142;
  line-height: 1.375rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
}
.xiangs-wz2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.1875rem;
  padding: 0 0.25rem;
  border-radius: 0.1875rem;
  border: 0.03125rem solid #c2c2c2;
  color: #858282;
  font-size: 0.625rem;
  margin-top: 0.125rem;
}
.price {
  text-align: left;
  display: flex;
  align-items: baseline;
  color: #f74c4c;
  font-weight: 700;
}
.price-1 {
  font-size: 1rem;
  font-family: DINAlternate-Bold;
  box-sizing: inherit;
  text-align: left;
  display: flex;
  align-items: baseline;
  color: #f74c4c;
  font-weight: 700;
}
.price-2 {
  font-size: 0.75rem;
  box-sizing: inherit;
  text-align: left;
  display: flex;
  align-items: baseline;
  color: #f74c4c;
  font-weight: 700;
}
.top-right {
  text-align: left;
}
.xiangs-left {
  margin-left: 0.4375rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.xiangs-tj {
  margin-top: 0.625rem;
  text-align: left;
  background: #f5f5f5;
  border-radius: 0.375rem;
  padding: 0.625rem 0.625rem 0.8125rem;
  font-size: 0.75rem;
  color: #2d3142;
  line-height: 1.0625rem;
}
.xiangs-tj::before {
  content: "推荐理由：";
  color: #2d3142;
  font-weight: 700;
}
.xiangs-xk {
  margin-top: 0.625rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.xk-left {
  font-size: 0.75rem;
  color: #727479;
  display: flex;
}
.user-tx {
  display: flex;
  margin-right: 0.25rem;
}
.user-tx > img {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
}
.xk-right {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.625rem;
  width: 4.0625rem;
  background: linear-gradient(133deg, #ff754f, #fa5034);
  border-radius: 0.9375rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
}
.top1-img {
  position: absolute;
  top: -1.25rem;
  left: 0;
  width: 4.1875rem;
  height: 2.5625rem;
}
.fushi-tj {
  margin: 0.625rem 0 0;
}
.fushi-tu {
  display: flex;
  height: 10.625rem;
}
.tuji-one {
  flex: 2;
}
.tuji-one > img {
  width: 100%;
  height: 100%;
  border-radius: 0.375rem 0 0 0.375rem;
}
.tuji-two {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-left: 0.125rem;
}
.tu-one {
  flex: 1;
}
.tu-one > img {
  width: 100%;
  height: 100%;
  border-radius: 0 0.375rem 0 0;
}
.tu-two {
  margin-top: 0.125rem;
  flex: 1;
  overflow: hidden;
}
.tu-two > img {
  width: 100%;
  height: 100%;
  border-radius: 0 0 0.375rem 0;
}
</style>
